<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isloading" @refresh="onRefresh">
    <!-- 无限刷新 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset="50"
          :immediate-check = false
          @load="onLoad"
        >
            <!-- 子组件渲染页面 -->
            <HouseItem
            v-for="(item,index) in houseList"
            :key="index"
            :obj = "item"
            :tags = "item.tags"
            ></HouseItem>
        </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { houseApi } from '@/api'
import HouseItem from '@/views/Find/components/HouseItem.vue'
export default {
  data () {
    return {
      houseList: [],
      loading: false,
      finished: false,
      isloading: false
    }
  },
  async created () {
    this.getHouseList()
  },
  components: { HouseItem },
  methods: {
    async getHouseList () {
      const res = await houseApi({ cityId: 0 })
      // console.log(res)
      if (res.data.body.list.length === 0) {
        this.finished = true
      } else {
        this.houseList = [...this.houseList, ...res.data.body.list]
        this.loading = false
      }
      // this.houseList = res.data.body.list
    // console.log(this.houseList)
    },
    onLoad () {
      if (this.houseList.length > 0) {
        this.getHouseList()
        console.log('页面滚动了')
      }
    },
    // 下拉刷新
    onRefresh () {
      this.houseList = []
      this.getHouseList()
      this.isloading = false
    }
  }
}
</script>

<style>

</style>
